<template>
  <div class="top_name_content">
    <div class="time">{{ time }}</div>
    <div class="occu"></div>
    <div class="name">无线测温系统</div>
    <div class="occu"></div>
    <div class="details">
      <div class="de_img">
        <img src="../assets/image/de_img.png" alt="">
      </div>
      <div class="de_text">监测详情</div>
      <!--      <div class="de_text" style="margin-left: 10px" @click="allIn">{{large}}</div>-->
    </div>

  </div>
</template>
<script>
export default {
  name: "top_name",
  data() {
    return {
      large: '大屏模式',
      time: '正在获取时间.....',
    }
  },
  mounted() {
    this.queryInfo();
    setInterval(() => {
      this.queryInfo();
    }, 1000);
  },
  methods: {
    //全屏方法
    isScreenFull() {
      if (!screenfull.isEnabled) {
        return false;
      }
      // 这个方法会请求全屏，如果当前是全屏则会退出全屏。
      // 无需自己再判断当前屏幕状态
      screenfull.toggle();
    },
    queryInfo() {
      var today = new Date();
      var DD = String(today.getDate()).padStart(2, '0');
      var MM = String(today.getMonth() + 1).padStart(2, '0');
      var yyyy = today.getFullYear();
      let hh;
      hh = String(today.getHours()).padStart(2, '0');
      let mm;
      mm = String(today.getMinutes()).padStart(2, '0');
      let ss;
      ss = String(today.getSeconds()).padStart(2, '0');
      today = yyyy + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss;
      this.time = today;
    },
  }


}


</script>
<style lang="scss" scoped>
$topNameHeight: vh(102);
$marginLeft: vw(86);

.top_name_content {
  width: vw(1813-66);
  height: $topNameHeight;
  margin-left: $marginLeft;
  display: flex;

  div {
    // height: $topNameHeight;
    text-align: center;
    // line-height: $topNameHeight;
    color: white;
  }

  .time {
    width: 1%;
    flex-grow: 1;
    margin-top: vh(50);
  }

  .name {
    width: 1%;
    flex-grow: 4.4;
    margin-top: vh(5);
    font-size: vh(42);
    font-family: YouSheBiaoTiHei-Regular, YouSheBiaoTiHei;
    font-weight: 400;
  }

  .details {
    width: 1%;
    flex-grow: 1;
    margin-top: vh(50);
    display: flex;

    .de_img {
      width: vw(28);
      height: vh(27);
      margin-right: vw(10);

      img {
        width: vw(28);
        height: vh(27);
        object-fit: cover;
      }
    }
  }

  .occu {
    width: 1%;
    flex-grow: 1.2;
  }
}
</style>
